body {
  margin: 0;
  height: 100vh;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.window {
  box-sizing: border-box;
  font-size: 5px;
  width: 25em;
  height: 35em;
  background-color: #d9d9d9;
  border-radius: 5em;
  box-shadow: inset 0 0 8em rgba(0, 0, 0, 0.2), 0 0 0 0.4em #808080,
    0 0 0 4em whitesmoke, 0 0 0 4.4em #808080, 0 2em 4em 4em rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.window .curtain {
  width: inherit;
  height: inherit;
  background-color: whitesmoke;
  border-radius: inherit;
  position: absolute;
  top: -5%;
  box-shadow: 0 0 0 0.4em #808080, 0 0 3em rgba(0, 0, 0, 0.4);
  z-index: 2;
  transition: 0.5s ease-in-out;
}

.window .curtain::before,
.window .curtain::after {
  content: "";
  position: absolute;
  height: 0.8em;
  bottom: 1.6em;
  border-radius: 0.4em;
}

.window .curtain::before {
  width: 40%;
  background-color: #808080;
  left: 30%;
}

.window .curtain::after {
  width: 1.6em;
  background-image: radial-gradient(orange, orangered);
  left: calc((100% - 1.6em) / 2);
}

.window .clouds {
  width: 20em;
  height: 30em;
  position: absolute;
  top: calc((100% - 30em) / 2);
  left: calc((100% - 20em) / 2);
  box-shadow: 0 0 0 0.4em #808080;
  border-radius: 7em;
  background-color: deepskyblue;
  overflow: hidden;
}

.window .clouds span {
  width: 10em;
  height: 4em;
  position: absolute;
  background-color: #fff;
  border-radius: 4em;
  animation: move 4s linear infinite;
}

.window .clouds span::before,
.window .clouds span::after {
  content: "";
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: white;
  border-radius: 50%;
}

.window .clouds span::before {
  top: -2em;
  left: 2em;
}

.window .clouds span::after {
  top: -1em;
  right: 1em;
}

.window .clouds span:nth-child(2) {
  top: 40%;
  animation-delay: -1s;
}

.window .clouds span:nth-child(3) {
  top: 60%;
  animation-delay: -0.5s;
}

.window .clouds span:nth-child(4) {
  top: 20%;
  transform: scale(2);
  animation-delay: -1.5s;
}

.window .clouds span:nth-child(4) {
  top: 70%;
  transform: scale(1.5);
  animation-delay: -3s;
}

@keyframes move {
  from {
    left: -150%;
  }

  to {
    left: 150%;
  }
}

.toggle {
  position: absolute;
  filter: opacity(0);
  width: 25em;
  height: 35em;
  font-size: 5px;
  cursor: pointer;
  z-index: 3;
}

.toggle:checked ~ .window .curtain {
  top: -90%;
}
